<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="/webSite/css/header-public.css" />
		<link rel="stylesheet" href="/webSite/css/index.css" />
		<link rel="stylesheet" href="/webSite/css/banner.css" />
		<link rel="stylesheet" href="/webSite/css/article-list-public.css" />
		<!--[if lt IE 9]>
			<script type="text/javascript" src="/webSite/js/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<!--头部引用-->
		<% include header-public.html %>
		<!--内容-->
		<div id="content" class="cl">
			<% if(banner.length){ %>
				<!--banner-->
				<div class="banner banner-div">
					<ul class="banner-list">
						<% banner.forEach(function(data , index){ %>
							<li <% if(index == 0){ %> style="left:0" <% } %>>
								<a href="<%= data.url %>">
									<img src="<%= data.imgUrl %>">
								</a>
							</li>
						<% }) %>
					</ul>
					<a href="javascript:;" class="btn btn-left">
						<i class="iconfont">&#xe602;</i>
					</a>
					<a href="javascript:;" class="btn btn-right">
						<i class="iconfont">&#xe601;</i>
					</a>
				</div>
			<% } %>
			<!--left-->
			<div class="left-content content-div">
				<h4 class="content-title pl-20">最新发布</h4>
				<!--文章列表-->
				<% include article-list-public.html %>
			</div>
			<!--right-->
			<div class="right-content">
				<div class="content-div pt-0">
					<h4 class="content-title">栏目分类</h4>
					<!--栏目分类t-->
					<div class="column-list cl">
						<% if(column.length){ %>
							<% column.forEach(function(data , index){ %>
								<a href="/article?id=<%= data.id %>" <% if(index % 2 != 0){ %> class="border" <% } %>><%= data.name %></a>
							<% }) %>
						<% }else{ %>
							<h4 style="text-align:center;margin-top:10px;">暂时还未任何栏目</h4>
						<% } %>
					</div>
				</div>
				<div class="content-div pt-0 recommend">
					<!--title-->
					<h4 class="content-title">热门推荐</h4>
					<% if(hotArticle.length){%>
						<ul class="recommend-list">
								<% hotArticle.forEach(function(data , index){ %>
								<li>
									<a href="/article-details?id=<%= data.id %>">
										<i><%= index+1 %></i>
										<%= data.title %>
									</a>
								</li>
								<% }) %>
						</ul>
					<% }else{ %>
						<h4 style="text-align:center;margin-top:10px;">还没有推荐哦!</h4>
					<% } %>
				</div>
				<!--广告-->
				<div class="ad-index content-div">

				</div>
				<!--联系我-->
				<div class="contact content-div">
					<!--title-->
					<h4 class="content-title">联系博主</h4>
					<div class="contact-div">
						<a class="img" href="javascript:;">
							<img src="">
						</a>
						<h4 class="name">微信</h4>
					</div>
					<div class="contact-div f-r">
						<a class="img" href="javascript:;">
							<img src="">
						</a>
						<h4 class="name">微博</h4>
					</div>
				</div>
			</div>
		</div>
		<!--文章加载更多模板-->
		<script id="article-tpl" type="text/html">
			{{each data as article}}
			<li>
				<a href="/article-details{{article._id}}" class="article-img">
					<img src="{{article.imgSrc}}">
				</a>
				<div class="article">
					<a class="article-title" href="/article-details?id={{article._id}}">{{article.title}}</a>
					<div class="article-info">
						<span class="time">
							<i class="iconfont">&#xe604;</i>
							{{article.releaseTime}}
						</span>
						<span class="time">
							<i class="iconfont">&#xe605;</i>
							{{article.author}}
						</span>
						<span class="time">
							<i class="iconfont">&#xe603;</i>javascript
						</span>
					</div>
					<p class="article-ts">{{article.briefing}}</p>
				</div>
			</li>
			{{/each}}
		</script>
		<script type="text/javascript" src="/webSite/js/template.js" ></script>
		<script type="text/javascript" src="/webSite/js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="/webSite/js/banner.js"></script>
		<script type="text/javascript" src="/webSite/js/header-public.js"></script>
		<script>
			$(function(){
				var banner = new Banner({
					b_element : ".banner-div"
				}),
				page = 1;
				//加载更多
				$(".add-btn").click(function(){
					$.post("/getArticle" , {page : page} , function(data){
						data.data.length < 10 && $(".add-btn").css("display" , "none");
						if(data.state == "ok"){
							var list = template("article-tpl" , data);
							$(".article-list").append(list);
							page++;
						}else{
							alert(data.message);
						};
					},"JSON")
				});
			});
		</script>
	</body>
</html>
